<template>
    <div class="xieyi-container">
        <div class="page-header">
            <h2>协议管理</h2>
            <p class="sub-title">管理各类协议内容，确保信息的准确性和时效性</p>
        </div>
        <div class="content-wrapper">
            <el-tabs v-model="activeTab" @tab-click="handleTabClick" type="border-card">
                <el-tab-pane label="关于我们" name="abouts">
                    <div class="content-area">
                        <div class="editor-wrapper">
                            <wang height="300px" width="100%" v-model="addForm.abouts" />
                        </div>
                        <div class="btn-area">
                            <el-button type="primary" size="large" @click="handleUpdate('abouts')">
                                <el-icon><Check /></el-icon>更新内容
                            </el-button>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="加入同盟" name="join">
                    <div class="content-area">
                        <div class="editor-wrapper">
                            <wang height="300px" width="100%" v-model="addForm.join" />
                        </div>
                        <div class="btn-area">
                            <el-button type="primary" size="large" @click="handleUpdate('join')">
                                <el-icon><Check /></el-icon>更新内容
                            </el-button>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="法律声明" name="lawer">
                    <div class="content-area">
                        <div class="editor-wrapper">
                            <wang height="300px" width="100%" v-model="addForm.lawer" />
                        </div>
                        <div class="btn-area">
                            <el-button type="primary" size="large" @click="handleUpdate('lawer')">
                                <el-icon><Check /></el-icon>更新内容
                            </el-button>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="用户协议" name="userportocol">
                    <div class="content-area">
                        <div class="editor-wrapper">
                            <wang height="300px" width="100%" v-model="addForm.userportocol" />
                        </div>
                        <div class="btn-area">
                            <el-button type="primary" size="large" @click="handleUpdate('userportocol')">
                                <el-icon><Check /></el-icon>更新内容
                            </el-button>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="隐私政策" name="privacy">
                    <div class="content-area">
                        <div class="editor-wrapper">
                            <wang height="300px" width="100%" v-model="addForm.privacy" />
                        </div>
                        <div class="btn-area">
                            <el-button type="primary" size="large" @click="handleUpdate('privacy')">
                                <el-icon><Check /></el-icon>更新内容
                            </el-button>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import {
    getProtocolInfo,
    updateProtocol
} from '@/api/zhaokao/systemweb';
import { ElMessage } from 'element-plus';
import { Check } from '@element-plus/icons-vue';

const activeTab = ref('abouts');
const addForm = reactive({
    abouts: '',
    join: '',
    lawer: '',
    userportocol: '',
    privacy: ''
});

// 获取协议内容
const getProtocolContent = async (code) => {
    try {
        const res = await getProtocolInfo(code);
        if (res && res.data) {
            addForm[code] = res.data.content || '';
        }
    } catch (error) {
        console.error('获取协议内容失败:', error);
        ElMessage.error('获取内容失败');
    }
};

// 处理标签页点击
const handleTabClick = (tab) => {
    getProtocolContent(tab.props.name);
};

// 处理更新
const handleUpdate = async (code) => {
    try {
        const params = {
            code: code,
            content: addForm[code]
        };
        const res = await updateProtocol(params);
        if (res) {
            ElMessage.success('更新成功');
        }
    } catch (error) {
        console.error('更新失败:', error);
        ElMessage.error('更新失败');
    }
};

// 初始加载获取第一个标签页内容
onMounted(() => {
    getProtocolContent(activeTab.value);
});
</script>

<style lang="scss" scoped>
.xieyi-container {
    padding: 24px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 48px);

    .page-header {
        margin-bottom: 24px;
        
        h2 {
            font-size: 24px;
            color: var(--el-text-color-primary);
            margin: 0 0 8px 0;
            font-weight: 600;
        }

        .sub-title {
            color: var(--el-text-color-secondary);
            font-size: 14px;
            margin: 0;
        }
    }

    .content-wrapper {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

        :deep(.el-tabs) {
            .el-tabs__header {
                margin-bottom: 0;
            }

            .el-tabs__nav {
                border: none;
            }

            .el-tabs__item {
                height: 48px;
                line-height: 48px;
                font-size: 15px;
                
                &.is-active {
                    font-weight: 600;
                }
            }
        }
    }

    .content-area {
        padding: 24px;

        .editor-wrapper {
            background: #fff;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            overflow: hidden;
        }

        .btn-area {
            margin-top: 24px;
            text-align: center;

            .el-button {
                padding: 12px 24px;
                font-weight: 500;
                
                .el-icon {
                    margin-right: 6px;
                }
            }
        }
    }
}
</style>
